
import React from 'react';
import { Checkbox, Empty, Icon } from 'antd';
import moment from 'moment';
import cass from 'classnames';
import s from './index.module.less';
import { renderIcon } from '../UploadModal';

/**
col为2的时候父盒子要设置的样式属性
display: flex;
flex-wrap: wrap;
justify-content: space-between;
 */

export default function FileList ({ mainKey, checkedKey, files, col, onChange, onDoubleClick, onClick, isShowInSlider }) {
    return (
        <div className={cass(s.wrap, { [s.wrapItem]: col === 2 })}>
            {files.length ? files.map((v, i) => (
                <FileItem 
                    col={col}
                    isShowInSlider={isShowInSlider}
                    key={v[mainKey]}
                    checked={v[checkedKey]}
                    filename={v.filename}
                    isviewed={v.isviewed}
                    uploader={v.uploader}
                    uploadtime={v.uploadtime}
                    onDoubleClick={onDoubleClick ? () => onDoubleClick(v, renderIcon(v.filename).icon) : undefined}
                    onClick={onClick ? () => onClick(v, renderIcon(v.filename).icon) : undefined}
                    onChange={onChange ? (e) => onChange(e, i) : null}
                />
            )) : <Empty description={'暂无资料'} style={{ margin: '0 auto' }}/>}
        </div>
    )
    
}

export function FileItem ({ checked, filename, isviewed, uploader, uploadtime, col, onChange, onDoubleClick, onClick, isShowInSlider }) {
    const { icon, color } = renderIcon(filename);
    return (
        <div className={cass(s.file, { [s.col2]: col === 2 })}>
            { onChange ? <Checkbox checked={checked} onChange={onChange}/> : null }
            <div className={s.icon}>
                <Icon type={icon} style={{ color }} />
                {isviewed ? null : <span className={cass('mdi', 'mdi-circle', s.dot)} />} 
            </div>
            <div className={s.info} onDoubleClick={onDoubleClick} onClick={onClick}>
                <span className={s.name}>{filename}</span>
                <div className={cass(s.time, { [s.timeBySide]: isShowInSlider })}>
                    <span>
                        {/* 上传人： */}
                        {uploader || ''}
                    </span>
                    <span>
                        {/* 上传时间： */}
                        {uploadtime ? moment(uploadtime).format('YYYY年MM月DD日 HH:mm' ) : '---'}
                    </span>
                </div>
            </div>                 
        </div>
    )
    
}

